<style>
    .previous-page,.next-page{
        box-shadow: 0px 0px 0px 1px #00B5AD inset !important;
        color: #00B5AD !important;
        text-decoration: none;
    }
    #pagenavi{
        padding-left: 40%;
    }
    #pagenavi>a{
        margin:0 8px;
        padding:10px 20px;
        border: 1px solid #e1e2e3;
    }
    .current{
        padding:10px 5px;
    }
</style>

<div id="pagenavi" class="noselect">
    {% if article_list.has_previous %}
{#        # 判断是否还有上一页，有的话要显示一个上一页按钮#}
        <a class="previous-page" href="{{ url }}page={{ article_list.previous_page_number }}">
            <span class="icon-previous"></span>上一页
        </a>
    {% endif %}

{#    # 页码号为1永远显示#}
    {% if first_page == current_page %}
{#        # 当前页就是第一页#}
        <span class="first-page current">1</span>
    {% else %}
{#        # 否则的话，第一页是可以点击的，点击后通过?page=1的形式把页码号传递给视图函数#}
        <a href="{{ url }}page=1" class="first-page">1</a>
    {% endif %}

    {% if pages_first > 2 %}
{#        # 2以前的页码号要被显示成省略号了#}
        <span>...</span>
    {% endif %}

    {% for page in pages %}
{#        # 通过for循环把pages中的值显示出来#}
        {% if page == current_page %}
{#            # 是否当前页，按钮会显示不同的样式#}
            <span class="current">{{ page }}</span>
        {% else %}
            <a href="{{ url }}page={{ page }}">{{ page }}</a>
        {% endif %}
    {% endfor %}

{#    # pages最后一个值+1的值小于最大页码号，说明有页码号需要被省略号替换#}
    {% if pages_last < last_page %}
        <span>...</span>
    {% endif %}

{#    # 永远显示最后一页的页码号，如果只有一页则前面已经显示了1就不用再显示了#}
    {% if last_page != 1 %}
        {% if last_page == current_page %}
            <span class="current">{{ last_page }}</span>
        {% else %}
            <a href="{{ url }}page={{ last_page }}">{{ last_page }}</a>
        {% endif %}
    {% endif %}

{#    # 还有下一页，则显示一个下一页按钮#}
    {% if article_list.has_next %}
        <a class="next-page" href="{{ url }}page={{ article_list.next_page_number }}">
            下一页<span class="icon-next"></span>
        </a>
    {% endif %}
</div>